<script setup>
import Demo06Class02Children from './demo06-class-02-children.vue';
</script>
<template>
  <h2>组件上使用class</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">组件上使用class</div>
    <div  class="zhtt-demo-card-body">
      <syntax02-component5></syntax02-component5>
      <my-component  class="hasError"></my-component>
      <my-component2></my-component2>
    </div>
    <div class="zhtt-demo-card-footer">
      <p>子组件p标签样式为：active，使用子组件时添加样式为：hasError，渲染后p标签样式为：active hasError</p>
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">子元素有多层节点时，为指定节点添加样式</div>
    <div  class="zhtt-demo-card-body">
      <Demo06Class02Children class="hasError" lubanTitle="这是标题内容"></Demo06Class02Children>
    </div>
    <div class="zhtt-demo-card-footer">
      <p>:title="$attrs.lubanTitle"</p>
      <p>:class="$attrs.class"</p>
    </div>
  </div>
</template>
<style scoped>
.hasError{
  color:red;
}
.active{
  background: #f2f2f2;
}
.div{
  font-size:20px;padding:10px;
}
</style>
